<template>
  <section class="page bg-white">
    <headerbar>支部相册
      <span v-if="canEdit" @click="showMenu" class="head-btn-text" slot="btn">更多</span>
      <div v-if="isShowMenu" class="edit-menu-wrap" @click="hideMenu">
        <ul class="edit-menu">
          <li @click="editItem">编辑</li>
          <hr>
          <li @click="deleteItem">删除</li>
        </ul>
      </div>
    </headerbar>

    <section class="bg-white">
      <section class="detail">
        <h1 class="title text-center">{{data.title}}</h1>
        <div class="block mgh-0 pdv-3 pdh-2">
          <div class="cont-text pdv-2" v-html="tools.resumeEnter(data.ext)">
          </div>
        </div>
        <p class="pdv-2"></p>

        <!--<div class="text-center no-data" v-if="!data.annexList || (data.annexList && data.annexList.length===0)">
          <img src="../../../../static/images/no_data.png" alt="">
          <p>暂无数据</p>
        </div>-->
        <!--<ul class="list-item mui-content-padded flex-justify-start" v-if="data.annexList">
          <li class="enclosure-upload" v-for="item in data.annexList">
            <img v-if="isImage(item.fileName)" class="enclosure-upload-file" :src="tools.getImgUrl(item.fileId)" @click="showImagePreview(item)"/>
            <img v-if="!isImage(item.fileName)" class="enclosure-upload-file" src="../../../../static/images/up_document.png" @click="downLoadFile(item)" />
            <p class="mui-ellipsis">{{item.fileName}}</p>
          </li>
        </ul>-->
        <div class="mui-content-my">
          <div class="imgs" v-saveImage>
            <div @click="showImagePreview(item)" class="img" v-for="(item,i) in data.annexList"
                 :style="{'background-image':'url(' + tools.getImgUrl(item.fileId,true) + ')'}">
<!--              <img :src="tools.getImgUrl(item.fileId,true)" @click="showImagePreview(item)">-->
            </div>
          </div>
        </div>
      </section>
    </section>

    <section v-if="false" class="d-scroll-2head bg-white inner-content">
      <commentListComponent v-if="detail" :_contentId="detail.id" :shareType="3"></commentListComponent>
    </section>

  </section>
</template>
<script>
  import api from '@/common/config/api'
  import tools from '@/utils/tools'
  import commentListComponent from '@/components/common/commentListComponent'
  import moment from 'moment'
  export default {
    components: {commentListComponent},
    name: 'newTermReminderDetail',
    data () {
      return {
        fn: tools,
        data: {},
        id: '',
        index: 2,
        title: '支部空间详情',
        files: [],
        isShowMenu: false,
        fileNames: [],
        detail: false,
        canEdit: false,
      }
    },
    created () {
      this.id = this.$route.query.id
      this.index = this.$route.query.index
      this.loadData()
      this.saveSpaceInfoRead()
      this.$store.state.isSpace = true
    },
    beforeDestroy () {
      this.$store.state.isSpace = false
    },
    methods: {
      /*显示菜单*/
      showMenu () {
        this.isShowMenu = true
      },
      /*隐藏菜单*/
      hideMenu () {
        this.isShowMenu = false
      },
      /*编辑内容*/
      editItem () {
        this.hideMenu()
        this.$store.state.branchDetail = this.data
        this.$router.push({name: 'albumsAdd', query: {id: this.$route.query.id}})
      },
      /*删除内容*/
      deleteItem () {
        this.hideMenu()
        let params = {
          loginId: this.tools.getUserInfo().id,
          spaceId: this.id
        }
        this.tools.showLoading()
        this.fetchService.saveSpaceInfoDelSpaceInfo(params).then(res => {
          this.tools.hideLoading()
          if (res.code !== 0) {
            return this.tools.tip(res.message)
          }
          this.tools.tip('删除成功')
          setTimeout(() => {
            this.tools.back()
          }, 2000)
        })
      },
      loadData () {
        let data = {
          loginId: '112029',
          spaceId: this.id
        }
        this.fetchService.spaceInfoDetail(data).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.data = res.data
          this.detail = res.data
          this.$store.state.newsDetail = res.data
          this.canEdit = res.data.editPower || false
          // if (res.data.fileName && res.data.fileName !== '') {
          //   this.fileNames = res.data.fileName.split(',')
          // }
          // if (res.data.fileId && res.data.fileId !== '') {
          //   let files = res.data.fileId.split(',')
          //   files.map((v, index) => {
          //     let file = {}
          //     file.fileId = v
          //     if (this.fileNames[index] && this.fileNames[index] !== '') {
          //       file.fileName = this.fileNames[index]
          //     } else {
          //       file.fileName = '未知.temp'
          //     }
          //     this.files.push(file)
          //   })
          // }
        })
      },
      saveSpaceInfoRead () {
        let data = {
          loginId: '112029',
          spaceId: this.id
        }
        this.fetchService.saveSpaceInfoRead(data).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
        })
      },
      getTime (createTime) {
        return moment(createTime).format('YYYY年MM月DD日')
      },
      downLoadFile (item) {
        console.log("item={}", item)
        let url = this.tools.getImgUrl(item.fileId)
        let fileName = item.fileName
        if (window.android && window.android.downloadFile) {
          window.android.downloadFile(url, fileName)
        }
      },
      showImagePreview (item) {
        if (item.fileId.length < 1) {
          return false
        }
        let fileUrl = this.tools.getImgUrl(item.fileId)
        item.url = fileUrl
        let imgs = [fileUrl]
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': false
            },
            slot: 'header'
          }, '')
        }).show()
      },
      isImage (fileName) {
        let arrExt = fileName.split('.')
        return 'PNG,JPG,JPEG,BMP,GIF'.split(',').indexOf(arrExt[arrExt.length - 1].toUpperCase()) > -1
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .cont-text {
    word-break: break-all;
    padding:0 40px;
    padding-bottom:20px;
  }
  .mui-content-my{
    text-align: center;
    .imgs {
      display:flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .img {
       /* width:33%;
        flex-shrink: 0;
        background:$gray-color;
        font-size:0;*/
        margin-right:1.1%;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: 3rem;
        width: 3rem;
        img {@include fullImg();}
      }

    }
  }
</style>
